import React, {Component, cloneElement} from 'react';
import propTypes from 'prop-types';
import classNames from 'classnames';

class TabNav extends Component {
  static propTypes = {}

  getTabs () {
    const {panels, classPrefix, activeIndex} = this.props;
    return panels && panels.map(child => {
      const order = parseInt(child.props.order, 10);
      // 利用 class 控制显示和隐藏
      let classes = classNames({
        [`${classPrefix}-tab`]: true,
        [`${classPrefix}-active`]: order === activeIndex,
        [`${classPrefix}-disabled`]: child.props.disabled
      });
      let events = {};
      if (!child.props.disabled) {
        events = {
          onClick: this.props.onTabClick.bind(this, order)
        };
      }
      const ref = {};
      if (active === order) {
        ref.ref = 'activeTab';
      }
      return (
        <li
          {...events}
          className={classes}
          key={order}
          {...ref}
        >
          {child.props.tab}
        </li>
      )
    })
  }

  render() {
    const {classPrefix} = this.props;
    const rootClasses = classNames({
      [`${classPrefix}-bar`]: true
    });
    const classes = classNames({
      [`${classPrefix}-nav`]: true
    });
    return (
      <div className={rootClasses}>
        <ul className={classes}>
          {this.getTabs()}
        </ul>
      </div>
    );
  }

}

export default TabNav;
